<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/reset.css">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/style.css?v=6">
    <script src="{TEST_STATIC_PATH}new_beilai/js/screen.js"></script>
    <script src="{TEST_STATIC_PATH}new_beilai/js/jquery.js"></script>
    <script src="{TEST_STATIC_PATH}new_beilai/js/swiper.min.js"></script>
    <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>
    <style>
        .lessonFooter{
            height: 1rem;
            padding-top: 0;
        }
        .lessonFooter a.nextStep{
            line-height: .7rem;
            margin-top: .14rem;
        background: linear-gradient(90deg, {$config['formcolorhead']} 15.44%, {$config['formcolortop']} 90.59%);
        }
    </style>
</head>
<body class="grayBox">
<div class="lessonList giftList">
    <ul>
        {loop $free $item}
        <li data-giftid="{$item['id']}" >
            <div class="giftImg">
                <img src="{$item['top_img']}" >
            </div>
            <div class="giftTxt">
                <h2>{$item['name']}</h2>
                <p>
                    ¥<b>0</b>
                    <span>价值<span class="price">{$item['price']}</span>元</span>
                </p>
            </div>
        </li>
        {/loop}
    </ul>
</div>
<div id="screen"></div>

<div class="lessonFooter">
    <span class="allChose">全选</span>
    <a href="javascript:goNext()" class="nextStep" style="color: {$config['formcolorcentertext']}">下一步</a>
    <p>已选<span class="num">0</span>个</p>
</div>
</body>
<script type="text/javascript">
    let gift_min_num="{$gift_min_num}";
    let gift_max_num="{$gift_max_num}";
    $('.giftList li').click(function(){
        if($(this).hasClass('cur')){
            $(this).removeClass('cur')
        }else{
            $(this).addClass('cur');
        }
        let selected_length = $('.giftList li.cur').length;
        if (selected_length >gift_max_num){
            $(this).removeClass('cur')
            layer.msg(`最多选择${gift_max_num}个{$gift_other_name}`);
            return;
        }
        if($('.giftList li.cur').length === $('.giftList li').length) {
            $('.allChose').addClass('on');
        } else {
            $('.allChose').removeClass('on');
        }
        $('.lessonFooter .num').html($('.giftList li.cur').length);
    })


    //全选
    $('.allChose').click(function(){
        //判断能否全选
        let default_length = $('.giftList li').length;
        if (default_length<gift_max_num){
            //可以全选
            if($(this).hasClass('on')){
                $(this).removeClass('on')
                $('.giftList li').removeClass('cur')
            }else{
                $(this).addClass('on');
                $('.giftList li').addClass('cur')
            }
            $('.lessonFooter .num').html($('.giftList li.cur').length);
        }else{
            layer.msg(`最多选择${gift_max_num}个{$gift_other_name}`);
            return;
        }
    })
    function goNext(){
        let length = $('.giftList li.cur').length;
        if(length < gift_min_num) {
            layer.msg(`最少选择${gift_min_num}个{$gift_other_name}`);
            return;
        }
        if(length > gift_max_num) {
            layer.msg(`最多选择${gift_max_num}个{$gift_other_name}`);
            return;
        }
        let arr = [];
        let htmlArr = [];
        for (let i = 0; i < length; i++) {
            let giftid = $('.giftList li.cur').eq(i).data('giftid');
            let index = $('.giftList li').index($('.giftList li.cur').eq(i));
            let top_img = $('.giftList li .giftImg img').eq(index).attr('src');
            let name = $('.giftList li .giftTxt h2').eq(index).html();
            let price = $('.giftList li .giftTxt p .price').eq(index).html();
            arr.push(giftid);
            htmlArr.push({
                top_img, name, giftid, price
            })
        }
        let arrstr = arr.join(',');
        localStorage.setItem('gift_ids', arrstr);
        let giftStr = JSON.stringify(htmlArr);
        localStorage.setItem('giftStr', giftStr);
        let nextUrl="/{php echo createMobileUrl('wx', array('themeid'=>$themeid,'r'=>'education.index.payconfirm','from'=>'mobile','joinid'=>$joinid,'recordid'=>$recordid));}";
        window.location.href=nextUrl;
    }
</script>

</html>
